<template>
  <div :style="!showMobilePage?{width: containerWidth}:''" :class="{'mobile':showMobilePage}" class="file-list-container">
    <div v-if="fileGroup.videos.length" class="file-list-container-item">
      <div class="title-container">视频</div>
      <div v-for="(item, index) in fileGroup.videos" :key="item.time || item._index+'_'+index" class="video-item close-icon-hover">
        <VideoPlayer :src="item.url" :width="showMobilePage?'90%':'300px'" :height="'160px'" />
        <i v-if="isEdit" class="el-icon-close close-icon" @click="removeFile(item)"/>
      </div>
    </div>
    <div v-if="fileGroup.imgs.length" class="file-list-container-item">
      <div class="title-container">图片</div>
      <div class="list-item img-container">
        <div v-for="(item, index) in fileGroup.imgs" :key="item.time || item._index+'_'+index" :span="8" class="img-container-item close-icon-hover">
          <el-image
            :src="item.url"
            :preview-src-list="fileGroup.imgUrls"
            fit="cover"
            class="img-item"
          />
          <i v-if="isEdit" class="el-icon-close close-icon" @click="removeFile(item)"/>
        </div>
      </div>
    </div>
    <div v-if="fileGroup.others.length" class="file-list-container-item">
      <div class="title-container">文件</div>
      <div v-for="(item, index) in fileGroup.others" :key="item.time || item._index+'_'+index" class="other-item">
        <FileItem :item="item" :is-edit="isEdit" @removeFile="removeFile" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import VideoPlayer from './VideoPlayer';
import FileItem from './fileItem';
export default {
  components: { VideoPlayer, FileItem },
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    // 是否可以点击
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    containerWidth() {
      const w = {
        img: 288,
        video: 300,
        other: 240
      };
      let container = 0;
      let i = 0;
      if (this.fileGroup.imgs.length) {
        container += w.img;
        i++;
      }
      if (this.fileGroup.videos.length) {
        container += w.video;
        i++;
      }
      if (this.fileGroup.others.length) {
        container += w.other;
        i++;
      }
      return container + (i - 1) * 32 + 'px';
    },
    fileGroup() {
      const imgs = [];
      const imgUrls = [];
      const videos = [];
      const others = [];
      this.fileList.forEach((item, index) => {
        item._index = index;
        if (this.isImg(item.name)) {
          imgs.push(item);
          imgUrls.push(item.url);
        } else if (this.isVideo(item.name)) {
          videos.push(item);
        } else {
          others.push(item);
        }
      });

      return {
        imgs, videos, others, imgUrls
      };
    }
  },
  methods: {
    isImg(name) {
      const reg = /(\.(gif|png|jpg|jpeg|webp|bmp|tif))$/i;
      return reg.test(name);
    },

    isVideo(name) {
      const reg = /(\.(mp4|mkv|webm|avi|flv|mov|wmv))$/i;
      return reg.test(name);
    },
    removeFile(item) {
      this.$emit('removeFile', item, item._index);
    }
  }
};
</script>
<style lang="scss" scoped>
.file-list-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  &.mobile {
    flex-direction: column;
  }
  .file-list-container-item {
    margin-right: 32px;
    margin-bottom: 16px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.video-item {
  margin-bottom: 10px;
  margin-top: 10px;
  position: relative;
  display: flex;
  &:last-child {
    margin-bottom: 0;
  }
}
.close-icon-hover {
  &:hover {
    .close-icon {
      display: flex !important;
    }
  }
}
.close-icon {
  position: absolute;
  right: -8px;
  top: -8px;
  color: #fff;
  background-color: #406eff;
  border-radius: 100%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  display: none;
}
.img-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 288px;
  .img-container-item {
    display: flex;
    margin-right: 8px;
    margin-bottom: 8px;
    position: relative;
    &:nth-child(3n) {
      margin-right: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
.title-container {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  &::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #406eff;
    margin-right: 5px;
  }
}
.list-item {
  margin-top: 10px;
}
.img-item {
  width: 90px;
  height: 90px;
  border-radius: 8px;
}
.other-item {
  margin-top: 10px;
  width: 240px;
}
</style>
